
<template>
  <div class="reverse-recommend" :class="{ 'dark-mode': isDarkMode }">
    <!-- Header with animated background -->
    <div class="animated-background"></div>
    
    <!-- Theme toggle with improved design -->
    <div class="theme-toggle" @click="toggleDarkMode" :title="isDarkMode ? '切换到亮色模式' : '切换到暗色模式'">
      <div class="toggle-icon">
        <span v-if="isDarkMode">☀️</span>
        <span v-else>🌙</span>
      </div>
    </div>
    
    <!-- Main content container -->
    <div class="content-container">
      <!-- Input section with improved design -->
      <div class="input-section">
        <h1>
          <span class="title-icon">🔄</span>
          反向智能推荐
          <div class="title-underline"></div>
        </h1>
        <p class="subtitle">输入你的喜好，AI将给出反向建议</p>
        
        <div class="search-box">
          <div class="input-wrapper">
            <i class="input-icon">🔍</i>
            <input 
              type="text" 
              v-model="userPreference" 
              placeholder="例如：我喜欢喝奶茶" 
              @keyup.enter="getRecommendations"
              :disabled="loading"
            />
          </div>
          
          <button @click="showCategoryDialog = true" class="category-button">
            <span>{{ selectedCategory === 'all' ? '全部类别' : selectedCategory === 'mild' ? '温和派' : selectedCategory === 'extreme' ? '极端派' : '玄学派' }}</span>
            <span class="arrow-down">▼</span>
          </button>
          
          <div v-if="showCategoryDialog" class="category-dialog">
            <div class="dialog-header">
              <span>选择类别</span>
              <span class="close-icon" @click="showCategoryDialog = false">✕</span>
            </div>
            <div class="category-list">
              <div 
                v-for="(category, index) in categoryList" 
                :key="index" 
                @click="selectCategory(category.value)"
                class="category-item"
              >
                {{ category.name }}
              </div>
            </div>
          </div>
          
          <button 
            @click="getRecommendations" 
            class="search-btn" 
            :disabled="loading || !userPreference.trim()"
            :class="{'btn-disabled': loading || !userPreference.trim()}"
          >
            <span class="btn-text">{{ loading ? '思考中...' : '获取建议' }}</span>
            <span class="btn-icon">✨</span>
          </button>
        </div>
      </div>

      <!-- Results section with improved card design -->
      <transition name="fade">
        <div class="results-section" v-if="recommendations || loading || error">
          <!-- Loading state with improved animation -->
          <transition name="fade">
            <div class="loading" v-if="loading">
              <div class="loading-container">
                <div class="spinner-container">
                  <div class="spinner"></div>
                  <div class="spinner-inner"></div>
                </div>
                <div class="loading-text">AI思考中<span class="dot-animation">...</span></div>
                <div class="loading-subtext">正在分析您的喜好，请稍候</div>
              </div>
            </div>
          </transition>
          
          <!-- Error state with improved design -->
          <transition name="fade">
            <div class="error" v-if="error">
              <div class="error-icon">⚠️</div>
              <div class="error-message">{{ error }}</div>
              <button class="retry-btn" @click="getRecommendations">重试</button>
            </div>
          </transition>
          
          <!-- Recommendations with improved card design -->
          <transition-group name="card-fade" tag="div" class="recommendations" v-if="!loading && !error">
            <!-- Mild recommendations -->
            <div class="recommendation-card mild" key="mild">
              <div class="card-header">
                <div class="header-content">
                  <div class="category-icon">🌱</div>
                  <h2>温和派</h2>
                </div>
                <div class="card-badge">实用建议</div>
              </div>
              <div class="card-description">可行性较高的温和建议</div>
              <ul>
                <li v-for="(item, index) in recommendations.mild" :key="'mild-'+index">
                  <div class="recommendation-content">
                    <div class="content-text">{{ item }}</div>
                    <div class="rating">
                      <span class="rating-label">评分：</span>
                      <div class="stars-container">
                        <span 
                          v-for="star in 5" 
                          :key="'mild-'+index+'-star-'+star" 
                          class="star" 
                          :class="{ 'active': ratings['mild-'+index] >= star }"
                          @click="rateRecommendation('mild-'+index, star)"
                        >★</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <!-- Extreme recommendations -->
            <div class="recommendation-card extreme" key="extreme">
              <div class="card-header">
                <div class="header-content">
                  <div class="category-icon">🔥</div>
                  <h2>极端派</h2>
                </div>
                <div class="card-badge">激进方案</div>
              </div>
              <div class="card-description">激进但有效的极端方案</div>
              <ul>
                <li v-for="(item, index) in recommendations.extreme" :key="'extreme-'+index">
                  <div class="recommendation-content">
                    <div class="content-text">{{ item }}</div>
                    <div class="rating">
                      <span class="rating-label">评分：</span>
                      <div class="stars-container">
                        <span 
                          v-for="star in 5" 
                          :key="'extreme-'+index+'-star-'+star" 
                          class="star" 
                          :class="{ 'active': ratings['extreme-'+index] >= star }"
                          @click="rateRecommendation('extreme-'+index, star)"
                        >★</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <!-- Mystic recommendations -->
            <div class="recommendation-card mystic" key="mystic">
              <div class="card-header">
                <div class="header-content">
                  <div class="category-icon">🔮</div>
                  <h2>玄学派</h2>
                </div>
                <div class="card-badge">奇思妙想</div>
              </div>
              <div class="card-description">趣味性强的奇特建议</div>
              <ul>
                <li v-for="(item, index) in recommendations.mystic" :key="'mystic-'+index">
                  <div class="recommendation-content">
                    <div class="content-text">{{ item }}</div>
                    <div class="rating">
                      <span class="rating-label">评分：</span>
                      <div class="stars-container">
                        <span 
                          v-for="star in 5" 
                          :key="'mystic-'+index+'-star-'+star" 
                          class="star" 
                          :class="{ 'active': ratings['mystic-'+index] >= star }"
                          @click="rateRecommendation('mystic-'+index, star)"
                        >★</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </transition-group>
        </div>
      </transition>

      <!-- History section with improved design -->
      <div class="history-section">
        <div class="section-header">
          <h3>
            <span class="section-icon">📜</span>
            历史记录
          </h3>
          <div class="section-actions" v-if="histories.length > 0">
            <button class="clear-btn" @click="clearHistories" title="清除所有历史记录">
              <span>清除历史</span>
            </button>
          </div>
        </div>
        <transition-group name="list" tag="div" class="history-cards" v-if="histories.length !== 0">
          <div 
            v-for="(history, index) in histories" 
            :key="'history-'+index" 
            class="history-card"
            @click="loadFromHistory(history)"
          >
            <div class="history-preference">
              <span class="history-icon">🔍</span>
              {{ history.preference }}
            </div>
            <div class="history-results">
              <div class="history-item"><span class="history-label">温和派:</span> {{ history.recommendations.mild[0] }}</div>
              <div class="history-item"><span class="history-label">极端派:</span> {{ history.recommendations.extreme[0] }}</div>
              <div class="history-item"><span class="history-label">玄学派:</span> {{ history.recommendations.mystic[0] }}</div>
            </div>
            <div class="history-time">
              <span class="time-icon">🕒</span>
              {{ formatTime(history.timestamp) }}
            </div>
          </div>
          
          <div class="empty-history" v-if="histories.length === 0" key="empty">
            <div class="empty-icon">📝</div>
            <div class="empty-text">暂无历史记录</div>
            <div class="empty-subtext">您的搜索记录将显示在这里</div>
          </div>
        </transition-group>
      </div>
    </div>

    <!-- Improved toast notification -->
    <transition name="toast">
      <div class="toast" v-if="showToast">
        <div class="toast-icon">✓</div>
        <div class="toast-message">{{ toastMessage }}</div>
      </div>
    </transition>
    
    <!-- Footer -->
    <div class="footer">
      <div class="footer-text">反向推荐 · 让你看到不一样的世界</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ReverseRecommend',
  data() {
    return {
      // 用户输入的偏好文本
userPreference: '',
// 存储AI推荐结果的对象
recommendations: null,
// 加载状态标志
loading: false,
// 错误信息
error: '',
// 存储用户对推荐内容的评分
ratings: {},
// 历史记录数组
histories: [],
// 是否显示提示信息
showToast: false,
// 提示信息内容
toastMessage: '',
// 当前选中的推荐类别
selectedCategory: 'all',
// 是否启用暗色模式
isDarkMode: false,
// 是否显示类别选择对话框
showCategoryDialog: false,
// 推荐类别列表
categoryList: [
  { name: '全部类别', value: 'all' },
  { name: '温和派', value: 'mild' },
  { name: '极端派', value: 'extreme' },
  { name: '玄学派', value: 'mystic' }
]    };
  },
  created() {
    // 检查用户偏好
    const darkModePref = localStorage.getItem('reverseDarkMode');
    if (darkModePref !== null) {
      this.isDarkMode = darkModePref === 'true';
    } else {
      // 默认跟随系统偏好
      this.isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    
    this.loadHistories();
    this.loadRatings();
  },
  methods: {
    async getRecommendations() {
      if (!this.userPreference.trim()) {
        this.showToastMessage('请输入你的喜好');
        return;
      }

      this.loading = true;
      this.error = '';
      this.recommendations = null;

      try {
        const response = await this.callLLMApi( this.userPreference);

        if (!response.data || response.data.status === 200) {
          this.error = 'AI思考中...请稍后再试';
          this.loading = false;
          return;
        }

        let content = response.data.choices[0].message.content;

      
        
        // 提取JSON内容部分
        const jsonStart = content.indexOf('{');
        const jsonEnd = content.lastIndexOf('}') + 1;
        const jsonStr = content.slice(jsonStart, jsonEnd);
        
        try {
          this.recommendations = JSON.parse(jsonStr);
        } catch (e) {
          console.error('JSON解析错误:', e);
          this.error = 'AI返回数据格式有误';
        }
        this.saveToHistory({
          preference: this.userPreference,
          recommendations: this.recommendations,
          timestamp: new Date().getTime()
        });
      } catch (error) {
        console.error('API Error:', error);
        this.error = '哎呀，AI出故障了！';
      } finally {
        this.loading = false;
      }
    },

    rateRecommendation(id, rating) {
      this.$set(this.ratings, id, rating);
      this.saveRatings();
      this.showToastMessage('AI已记录你的反馈，将优化推荐算法');
    },

    saveToHistory(record) {
      let histories = this.histories;
      histories.unshift(record);
      
      if (histories.length > 5) {
        histories = histories.slice(0, 5);
      }
      
      localStorage.setItem('reverseRecents', JSON.stringify(histories));
      this.histories = histories;
    },
    
    clearHistories() {
      this.histories = [];
      localStorage.removeItem('reverseRecents');
      this.showToastMessage('历史记录已清除');
    },

    loadFromHistory(history) {
      this.userPreference = history.preference;
      this.recommendations = history.recommendations;
      this.showToastMessage('已加载历史记录');
    },

    loadHistories() {
      const historiesStr = localStorage.getItem('reverseRecents');
      if (historiesStr) {
        try {
          this.histories = JSON.parse(historiesStr);
        } catch (e) {
          console.error('Failed to parse histories:', e);
          this.histories = [];
        }
      }else{
        this.histories = [];
      }
    },

    saveRatings() {
      localStorage.setItem('reverseRatings', JSON.stringify(this.ratings));
    },

    loadRatings() {
      const ratingsStr = localStorage.getItem('reverseRatings');
      if (ratingsStr) {
        try {
          this.ratings = JSON.parse(ratingsStr);
        } catch (e) {
          console.error('Failed to parse ratings:', e);
          this.ratings = {};
        }
      }
    },

    showToastMessage(message) {
      this.toastMessage = message;
      this.showToast = true;
      
      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },

    toggleDarkMode() {
      this.isDarkMode = !this.isDarkMode;
      localStorage.setItem('reverseDarkMode', this.isDarkMode);
    },
    
    selectCategory(category) {
      this.selectedCategory = category;
      this.showCategoryDialog = false;
    },

    formatTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
    },

    async callLLMApi(preference) {
      let categoryPrompt = '';
      if (this.selectedCategory !== 'all') {
        const categoryMap = {
          mild: '温和派',
          extreme: '极端派',
          mystic: '玄学派'
        };
        categoryPrompt = `仅给出${categoryMap[this.selectedCategory]}建议。`;
      }

      try {
        const response = await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
          model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
          messages: [{
            role: 'user',
            content: `用户喜好是"${preference}"，${categoryPrompt}请给出三类反向建议：
            1. 温和派：可行性较高的建议（如减少购买频率）
            2. 极端派：激进但有效的方案（如把奶茶换成香菜汁）
            3. 玄学派：趣味性强的奇特建议（如在奶茶里放醋）
            
            请按照以下JSON格式返回：
            {
              "mild": ["建议1", "建议2"],
              "extreme": ["建议1", "建议2"],
              "mystic": ["建议1", "建议2"]
            }`
          }],
          stream: false,
          max_tokens: 512,
          temperature: 0.7
        }, {
          headers: {
            Authorization: 'Bearer '+ process.env.VUE_APP_API_KEY,
            'Content-Type': 'application/json'
          }
        });
        console.log(response)
        return response
      } catch (error) {
        console.error('LLM API Error:', error);
        return null;
      }
    }
  }
};
</script>

<style scoped>
/* Base styles */
.reverse-recommend {
  font-family: "思源黑体", "Roboto", sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px;
  color: #333;
  background-color: #f8f9fa;
  min-height: 100vh;
  transition: all 0.4s ease;
  position: relative;
  overflow-x: hidden;
}

.reverse-recommend.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

/* Animated background */
.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.1), rgba(255, 215, 0, 0.1));
  z-index: -1;
  overflow: hidden;
}

.animated-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  animation: animateBackground 60s linear infinite;
}

.dark-mode .animated-background {
  background: linear-gradient(135deg, rgba(187, 134, 252, 0.1), rgba(3, 218, 198, 0.1));
}

@keyframes animateBackground {
  0% { background-position: 0 0; }
  100% { background-position: 1000px 0; }
}

/* Content container */
.content-container {
  position: relative;
  z-index: 1;
}

/* Theme toggle */
.theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 10;
}

.toggle-icon {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dark-mode .toggle-icon {
  background: rgba(30, 30, 30, 0.6);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.toggle-icon:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Headings and text */
h1 {
  color: #8A2BE2;
  text-align: center;
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: 700;
  position: relative;
  display: inline-block;
  width: 100%;
}

.title-icon {
  margin-right: 10px;
  display: inline-block;
  animation: pulse 2s infinite;
}

.title-underline {
  height: 4px;
  width: 80px;
  background: linear-gradient(90deg, #8A2BE2, transparent);
  margin: 8px auto 0;
  border-radius: 2px;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.dark-mode h1 {
  color: #BB86FC;
}

.dark-mode .title-underline {
  background: linear-gradient(90deg, #BB86FC, transparent);
}

.subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 25px;
  font-size: 1.1rem;
}

.dark-mode .subtitle {
  color: #aaa;
}

/* Input section */
.input-section {
  margin-bottom: 40px;
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.input-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.dark-mode .input-section {
  background: #1E1E1E;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.search-box {
  display: flex;
  margin-top: 25px;
  gap: 15px;
  flex-wrap: wrap;
}

.input-wrapper {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  color: #8A2BE2;
  opacity: 0.7;
}

.dark-mode .input-icon {
  color: #BB86FC;
}

input {
  width: 85%;
  padding: 15px 0px 15px 45px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.dark-mode input {
  background: #2D2D2D;
  border-color: #444;
  color: #e0e0e0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

input:focus {
  border-color: #8A2BE2;
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

.dark-mode input:focus {
  border-color: #BB86FC;
  box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.2);
}

.select-wrapper {
  position: relative;
  min-width: 150px;
  z-index: 1;
}

.select-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-style: normal;
  font-size: 12px;
  color: #8A2BE2;
  transition: all 0.3s;
}

.dark-mode .select-icon {
  color: #BB86FC;
}

.category-button {
  padding: 15px 35px 15px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(138, 43, 226, 0.05));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  position: relative;
}

.dark-mode .category-button {
  background: #2D2D2D;
  background-image: linear-gradient(to bottom, rgba(45, 45, 45, 0.8), rgba(187, 134, 252, 0.1));
  border-color: #444;
  color: #e0e0e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.category-button:hover {
  border-color: #9370DB;
  box-shadow: 0 4px 12px rgba(138, 43, 226, 0.15);
}

.dark-mode .category-button:hover {
  border-color: #BB86FC;
  box-shadow: 0 4px 12px rgba(187, 134, 252, 0.2);
}

.category-dialog {
  position: absolute;
  left: 20%;
  z-index: 100;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  padding: 15px;
  min-width: 200px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: top center;
}

.dark-mode .category-dialog {
  background: #2D2D2D;
  border: 1px solid #444;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
}

.close-icon {
  cursor: pointer;
  padding: 5px;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-item {
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.category-item:hover {
  background: rgba(138, 43, 226, 0.1);
}

.dark-mode .category-item:hover {
  background: rgba(187, 134, 252, 0.1);
  border-color: #BB86FC;
  box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.2);
}

.category-select:focus + .select-icon {
  color: #8A2BE2;
  transform: translateY(-50%) rotate(180deg);
}

.dark-mode .category-select:focus + .select-icon {
  color: #BB86FC;
}

/* Custom select options styling (works in some browsers) */
.category-select option {
  background-color: white;
  color: #333;
  width: 100%;
  min-width: 150px;
  max-width: 200px;
  box-sizing: border-box;
  padding: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark-mode .category-select option {
  background-color: #2D2D2D;
  color: #e0e0e0;
}

.search-btn {
  padding: 0 25px;
  background: linear-gradient(135deg, #8A2BE2, #9370DB);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 52px;
  box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}

.search-btn:hover {
  background: linear-gradient(135deg, #9370DB, #8A2BE2);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(138, 43, 226, 0.4);
}

.search-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);
}

.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: linear-gradient(135deg, #aaa, #888);
  box-shadow: none;
}

.btn-disabled:hover {
  transform: none;
  box-shadow: none;
  background: linear-gradient(135deg, #aaa, #888);
}

.btn-text {
  margin-right: 8px;
}

.btn-icon {
  font-size: 18px;
  animation: sparkle 1.5s infinite;
}

@keyframes sparkle {
  0% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.4; transform: scale(0.8); }
}

/* Results section */
.results-section {
  margin-bottom: 40px;
}

/* Transitions */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.card-fade-enter-active, .card-fade-leave-active {
  transition: all 0.5s;
}
.card-fade-enter, .card-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.card-fade-move {
  transition: transform 0.5s;
}

/* Loading state */
.loading {
  text-align: center;
  padding: 40px 20px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.dark-mode .loading {
  background-color: rgba(30, 30, 30, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.spinner-container {
  position: relative;
  width: 60px;
  height: 60px;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(138, 43, 226, 0.1);
  border-radius: 50%;
  border-top-color: #8A2BE2;
  animation: spin 1.2s ease-in-out infinite;
}

.spinner-inner {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 30px;
  height: 30px;
  border: 4px solid rgba(138, 43, 226, 0.1);
  border-radius: 50%;
  border-top-color: #9370DB;
  animation: spin 0.8s linear infinite reverse;
}

.dark-mode .spinner {
  border-color: rgba(187, 134, 252, 0.1);
  border-top-color: #BB86FC;
}

.dark-mode .spinner-inner {
  border-color: rgba(187, 134, 252, 0.1);
  border-top-color: #03DAC6;
}

.loading-text {
  font-size: 1.2rem;
  font-weight: 600;
  color: #8A2BE2;
}

.dark-mode .loading-text {
  color: #BB86FC;
}

.loading-subtext {
  color: #666;
  font-size: 0.9rem;
}

.dark-mode .loading-subtext {
  color: #aaa;
}

.dot-animation {
  display: inline-block;
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Error state */
.error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  padding: 30px;
  background-color: #FFF5F5;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  border: 1px solid rgba(255, 107, 107, 0.2);
}

.dark-mode .error {
  background-color: #2D1A1A;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.1);
}

.error-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.error-message {
  color: #ff6b6b;
  font-weight: 600;
  font-size: 1.1rem;
}

.retry-btn {
  margin-top: 10px;
  padding: 10px 20px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.retry-btn:hover {
  background: #ff5252;
  transform: translateY(-2px);
}

/* Recommendations */
.recommendations {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.recommendation-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.recommendation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.2;
}

.mild::before {
  background: linear-gradient(90deg, transparent, #4CAF50, transparent);
}

.extreme::before {
  background: linear-gradient(90deg, transparent, #FF5722, transparent);
}

.mystic::before {
  background: linear-gradient(90deg, transparent, #9C27B0, transparent);
}

.dark-mode .recommendation-card {
  background-color: #1E1E1E;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.recommendation-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.dark-mode .recommendation-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dark-mode .card-header {
  border-bottom-color: #333;
}

.card-badge {
  background: rgba(138, 43, 226, 0.1);
  color: #8A2BE2;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.mild .card-badge {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}

.extreme .card-badge {
  background: rgba(255, 87, 34, 0.1);
  color: #FF5722;
}

.mystic .card-badge {
  background: rgba(156, 39, 176, 0.1);
  color: #9C27B0;
}

.dark-mode .mild .card-badge {
  background: rgba(76, 175, 80, 0.2);
}

.dark-mode .extreme .card-badge {
  background: rgba(255, 87, 34, 0.2);
}

.dark-mode .mystic .card-badge {
  background: rgba(156, 39, 176, 0.2);
}

.card-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
  font-style: italic;
}

.dark-mode .card-description {
  color: #aaa;
}

.recommendation-card h2 {
  margin: 0;
  font-size: 1.5rem;
}

.category-icon {
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(138, 43, 226, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.mild .category-icon {
  background: rgba(76, 175, 80, 0.1);
}

.extreme .category-icon {
  background: rgba(255, 87, 34, 0.1);
}

.mystic .category-icon {
  background: rgba(156, 39, 176, 0.1);
}

.recommendation-card:hover .category-icon {
  transform: scale(1.1) rotate(10deg);
}

.mild h2 {
  color: #4CAF50;
}

.extreme h2 {
  color: #FF5722;
}

.mystic h2 {
  color: #9C27B0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 18px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.3s;
}

.dark-mode li {
  border-bottom-color: #333;
}

li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

li:hover {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transform: translateX(5px);
}

.dark-mode li:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.recommendation-content {
  padding: 0 10px;
}

.content-text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
  position: relative;
  padding-left: 20px;
}

.content-text::before {
  content: '•';
  position: absolute;
  left: 0;
  color: currentColor;
  font-size: 20px;
  line-height: 1;
}

.mild .content-text::before {
  color: #4CAF50;
}

.extreme .content-text::before {
  color: #FF5722;
}

.mystic .content-text::before {
  color: #9C27B0;
}

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
  margin-top: 15px;
}

.dark-mode .rating {
  background: rgba(255, 255, 255, 0.03);
}

.rating-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.dark-mode .rating-label {
  color: #aaa;
}

.stars-container {
  display: flex;
  gap: 5px;
}

.star {
  color: #ddd;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.3s;
  position: relative;
}

.dark-mode .star {
  color: #444;
}

.star:hover {
  transform: scale(1.2);
}

.star.active {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.dark-mode .star.active {
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

/* History section */
.history-section {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.dark-mode .history-section {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.section-icon {
  margin-right: 10px;
  font-size: 1.2em;
}

.history-section h3 {
  color: #8A2BE2;
  margin: 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}

.dark-mode .history-section h3 {
  color: #BB86FC;
}

.section-actions {
  display: flex;
  gap: 10px;
}

.clear-btn {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.clear-btn:hover {
  background: rgba(255, 107, 107, 0.2);
  transform: translateY(-2px);
}

/* List transitions */
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-move {
  transition: transform 0.5s;
}

.history-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.history-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.dark-mode .history-card {
  background-color: #1E1E1E;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.history-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.dark-mode .history-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.history-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #8A2BE2, #9370DB);
  opacity: 0;
  transition: opacity 0.3s;
}

.dark-mode .history-card::after {
  background: linear-gradient(to bottom, #BB86FC, #03DAC6);
}

.history-card:hover::after {
  opacity: 1;
}

.history-preference {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 1.1rem;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-icon {
  color: #8A2BE2;
}

.dark-mode .history-icon {
  color: #BB86FC;
}

.dark-mode .history-preference {
  color: #e0e0e0;
}

.history-results {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.02);
  padding: 12px;
  border-radius: 10px;
}

.dark-mode .history-results {
  color: #aaa;
  background: rgba(255, 255, 255, 0.03);
}

.history-item {
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 5px;
  border-left: 2px solid transparent;
  transition: all 0.3s;
}

.history-item:hover {
  border-left-color: #8A2BE2;
  padding-left: 8px;
}

.dark-mode .history-item:hover {
  border-left-color: #BB86FC;
}

.history-label {
  font-weight: 600;
  margin-right: 5px;
  color: #333;
}

.dark-mode .history-label {
  color: #e0e0e0;
}

.history-time {
  font-size: 12px;
  color: #999;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 10px;
}

.time-icon {
  opacity: 0.7;
}

/* Empty history state */
.empty-history {
  text-align: center;
  padding: 40px 20px;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 16px;
  border: 1px dashed #ddd;
}

.dark-mode .empty-history {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: #444;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #666;
}

.dark-mode .empty-text {
  color: #aaa;
}

.empty-subtext {
  font-size: 14px;
  color: #999;
}

/* Toast notification */
.toast {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(138, 43, 226, 0.9);
  backdrop-filter: blur(10px);
  color: white;
  padding: 15px 25px;
  border-radius: 50px;
  z-index: 1000;
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-enter-active, .toast-leave-active {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast-enter, .toast-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(30px);
}

.dark-mode .toast {
  background-color: rgba(187, 134, 252, 0.9);
  color: #121212;
  box-shadow: 0 10px 30px rgba(187, 134, 252, 0.3);
}

.toast-icon {
  background: white;
  color: #8A2BE2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.dark-mode .toast-icon {
  background: #121212;
  color: #BB86FC;
}

/* Footer */
.footer {
  margin-top: 50px;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #999;
  font-size: 14px;
}

.dark-mode .footer {
  border-top-color: rgba(255, 255, 255, 0.05);
  color: #777;
}

/* Responsive design */
@media (min-width: 768px) {
  .recommendations {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
  }
  
  .recommendation-card {
    flex: 1 1 calc(50% - 25px);
    min-width: 300px;
  }
  
  .mild {
    flex: 1 1 100%;
  }
}

@media (min-width: 1200px) {
  .recommendation-card {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .reverse-recommend {
    padding: 20px 15px;
  }
  
  .input-section, .recommendation-card {
    padding: 25px 20px;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  .search-box {
    flex-direction: column;
  }
  
  .search-btn {
    margin-top: 15px;
    width: 100%;
  }
  
  .select-wrapper {
    width: 100%;
  }
  
  .category-select {
    height: 55px;
    font-size: 16px;
    padding: 10px 35px 10px 15px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(138, 43, 226, 0.08));
    border-width: 2px;
  }
  
  .dark-mode .category-select {
    background-image: linear-gradient(to bottom, rgba(45, 45, 45, 0.9), rgba(187, 134, 252, 0.15));
  }
  
  .select-icon {
    font-size: 14px;
    right: 18px;
  }
  
  .history-card {
    padding: 18px;
  }
}

@media (max-width: 480px) {
  .reverse-recommend {
    padding: 15px 10px;
  }
  
  .input-section, .recommendation-card {
    padding: 20px 15px;
    border-radius: 15px;
  }
  
  h1 {
    font-size: 1.6rem;
  }
  
  .title-icon {
    display: block;
    margin: 0 auto 10px;
  }
  
  .category-select {
    height: 50px;
    font-size: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(138, 43, 226, 0.15);
  }
  
  .dark-mode .category-select {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }
  
  .category-select:active {
    /* 移除缩放效果 */
  }
  
  .select-icon {
    font-size: 12px;
    right: 15px;
  }
  
  .category-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  
  .recommendation-card h2 {
    font-size: 1.3rem;
  }
  
  .history-preference {
    font-size: 1rem;
  }
  
  .toast {
    width: 90%;
    padding: 12px 20px;
  }
}
</style>